<template>
  <div>
    <heads>
      <slot>登录页面</slot>
      <div class="kf_inp">
        <p><span>昵称</span><input placeholder="请输入昵称" @blur="blur" type="text" v-model="nc" /></p>
        <p>
          <span>手机</span><input placeholder="请输入电话" @blur="blur" maxlength="11" type="number" v-model="mob" />
        </p>
        <p>
          <span>密码</span><input placeholder="请输入密码" @blur="blur" type="password" v-model="pwd" />
        </p>
        <van-button :disabled="disabled" @click="log">登录</van-button>
      </div>
    </heads>
  </div>
</template>

<script>
import Vue from "vue"
import { Toast } from 'vant';
Vue.use(Toast);
import heads from "@/components/heads.vue";
export default {
  name: "",
  data() {
    return {
      nc: "",
      mob: "",
      pwd: "",
      disabled: true,
    };
  },
  components: {
    heads,
  },
  mounted() {},
  methods: {
    blur() {
      if (this.nc != "" && this.mob != "" && this.pwd != "") {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    log() {
      console.log(this.mob.length);
      if (this.mob.length != 11) {
        // this.disabled=false;
        Toast('请输入正确的手机号')
      } else if (this.pwd.length < 6) {
        // this.disabled=false
          Toast('密码不得少于6位数')
      } else {
        this.$store.commit("log",{ nc:this.nc,mob:this.mob,pwd:this.pwd});
        this.$router.push("/home");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.kf_inp {
  width: 300px;
  height: 300px;
  position: relative;
  top: 100px;
  left: 50px;
  p {
    width: 100%;
    height: 20%;
    display: flex;
    span {
      width: 20%;
      height: 100%;
      line-height: 65px;
      font-size: 16px;
    }
    input {
      width: 80%;
      height: 80%;
      font-size: 14px;
    }
  }
}
</style>
